import HandleBtn from '@/components/HandleBar/btn';
import Tabs, { TabsProps } from '@/components/Tabs';
import { statisticWorkStatusControllerExportWorkStatusDatas } from '@/services/ess/statisticWorkstatus';
import { downloadFetch } from '@/utils/downloadFile';
import { getDeviceCascader } from '@/utils/formatterTree';
import { useIntl } from '@umijs/max';
import { Radio, Space } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import DayChart from './components/DayChart';
import DayReport from './components/DayReport';
import MonthChart from './components/MonthChart';
import MonthReport from './components/MonthReport';
import YearChart from './components/YearChart';
import YearReport from './components/YearReport';

type ToolBarProps = {
  tableRef: React.MutableRefObject<null>;
};
const WorVal: React.FC = () => {
  const intl = useIntl();
  const [treeData, setTreeData] = useState<API.DeviceInfo[]>([]);
  const [reportData, setReportData] =
    useState<API.statisticWorkStatusControllerExportWorkStatusDatasParams>({
      dateType: 'day',
      date: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
      dataType: '1',
      code: '',
    });
  const [radioValue, setRadioValue] = useState('chart');
  const exportReport = () => {
    downloadFetch(statisticWorkStatusControllerExportWorkStatusDatas, reportData);
  };
  const changeReportData = (e: API.statisticWorkStatusControllerExportWorkStatusDatasParams) => {
    setReportData(e);
  };
  const electricRef = useRef(null);
  const ToolBarRender: React.FC<ToolBarProps> = () => {
    return (
      <>
        <Space>
          <div>
            <Radio.Group
              value={radioValue}
              onChange={(e) => {
                setRadioValue(e.target.value);
              }}
              buttonStyle="solid"
              className="global-group-radio-button"
            >
              <Radio.Button value={'list'}>
                {intl.formatMessage({ id: 'statistics.common.list' })}
              </Radio.Button>
              <Radio.Button value={'chart'}>
                {intl.formatMessage({ id: 'statistics.common.chart' })}
              </Radio.Button>
            </Radio.Group>
          </div>
          {radioValue === 'list' && (
            <HandleBtn
              key="export"
              handleType="export"
              onClick={() => {
                exportReport();
              }}
            >
              {intl.formatMessage({ id: 'statistics.common.export' })}
            </HandleBtn>
          )}
        </Space>
      </>
    );
  };
  const items: TabsProps['items'] = [
    {
      key: 'day',
      label: intl.formatMessage({ id: 'statistics.work.dayReport' }),
      children:
        radioValue === 'list' ? (
          <DayReport treeData={treeData} changeReportData={changeReportData} />
        ) : (
          <DayChart />
        ),
    },
    {
      key: 'month',
      label: intl.formatMessage({ id: 'statistics.work.monthReport' }),
      children:
        radioValue === 'list' ? (
          <MonthReport treeData={treeData} changeReportData={changeReportData} />
        ) : (
          <MonthChart />
        ),
    },
    {
      key: 'year',
      label: intl.formatMessage({ id: 'statistics.work.yearReport' }),
      children:
        radioValue === 'list' ? (
          <YearReport treeData={treeData} changeReportData={changeReportData} />
        ) : (
          <YearChart />
        ),
    },
  ];
  useEffect(() => {
    getDeviceCascader(false, undefined, ['BMS']).then((res) => {
      setTreeData(res);
      setReportData({
        dateType: 'day',
        date: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
        dataType: '1',
      });
    });
  }, []);
  return (
    <>
      <Tabs
        destroyInactiveTabPane={true}
        items={items}
        onChange={(e) => {
          switch (e) {
            case 'day':
              setReportData({
                date: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
                dataType: '1',
                dateType: 'day',
              });
              break;
            case 'month':
              setReportData({
                date: dayjs().format('YYYY-MM'),
                dataType: '1',
                dateType: 'month',
              });
              break;
            case 'year':
              setReportData({
                date: dayjs().format('YYYY'),
                dataType: '1',
                dateType: 'year',
              });
          }
        }}
        tabBarExtraContent={<ToolBarRender tableRef={electricRef} />}
      ></Tabs>
    </>
  );
};

export default WorVal;
